<template>
  <el-row :gutter="16">
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="98500">
          <template #title>
            <div style="display: inline-flex; align-items: center">使用人数</div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>每年平均人数</span>
            <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="693700">
          <template #title>
            <div style="display: inline-flex; align-items: center">售卖数量</div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>每年平均售出</span>
            <span class="red">
              12%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="72000" title="New transactions today">
          <template #title>
            <div style="display: inline-flex; align-items: center">盈利获取</div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>每年平均盈利</span>
            <span class="green">
              16%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div class="cube">
    <div class="top">
      <i class="fa-brands fa-x-twitter"></i>
    </div>
    <div class="box">
      <span style="--i: 0"></span>
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
    </div>
  </div>
</template>

<script setup>
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #050505;
  animation: colorChange 4s linear infinite;
}
@keyframes colorChange {
  0%,
  100% {
    filter: hue-rotate(270deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}
.cube {
  position: relative;
  left: 30%;
  top: 25%;
  width: 400px;
  height: 50px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
}
@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}
.cube .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.cube .box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(21, 21, 25, 1), rgba(255, 6, 6, 1));
  transform-style: preserve-3d;
  transform: rotateY(calc(90deg * var(--i))) translateZ(200px);
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: #222;
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(200px);
  display: flex;
  justify-content: center;
  align-items: center;
}
i {
  position: absolute;
  font-size: 15em;
  color: rgba(255, 6, 6, 1);
  text-shadow:
    0 0 50px rgba(255, 6, 6, 0.25),
    0 0 100px rgba(255, 6, 6, 0.5),
    0 0 200px rgba(255, 6, 6, 0.75),
    0 0 300px rgba(255, 6, 6, 1);
}
.top::before {
  content: '';
  position: absolute;
  top: 0;
  width: 400px;
  height: 400px;
  background: rgba(255, 6, 6, 1);
  transform: translateZ(-250px);
  opacity: 0.75;
  box-shadow:
    0 0 120px rgba(255, 6, 6, 0.2),
    0 0 200px rgba(255, 6, 6, 0.4) 0 0 300px rgba(255, 6, 6, 0.6),
    0 0 400px rgba(255, 6, 6, 0.2),
    0 0 500px rgba(255, 6, 6, 1);
}

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
